<!DOCTYPE html>
<html>
<body>
    <svg style="width:200px; height: 200px">
        <g id="container" style="fill: green"></g>
        <text id="text" y=90><text id="sentinel"></text></text>
        <g id="container2" style="fill: green"></g>
    </svg>
</body>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    var container = document.getElementById("container");
    container.insertAdjacentHTML("beforeBegin", "<text y=10>1 (black)</text>");
    container.insertAdjacentHTML("afterBegin", "<text y=30>2 (green)</text>");
    container.insertAdjacentHTML("beforeEnd", "<text y=50>3 (green)</text>");
    container.insertAdjacentHTML("afterEnd", "<text y=70>4 (black)</text>");

    document.getElementById("text").insertAdjacentText("afterBegin", "5");
    document.getElementById("sentinel").insertAdjacentText("beforeBegin", "6");
    document.getElementById("sentinel").insertAdjacentText("afterEnd", "7");
    document.getElementById("text").insertAdjacentText("beforeEnd", "8");

    var container2 = document.getElementById("container2");

    var element = document.createElementNS("http://www.w3.org/2000/svg", "text");
    element.textContent = "9";
    element.setAttribute('y', 110);
    container2.insertAdjacentElement("beforeBegin", element);

    element = document.createElementNS("http://www.w3.org/2000/svg", "text");
    element.textContent = "10";
    element.setAttribute('y', 130);
    container2.insertAdjacentElement("afterBegin", element);

    element = document.createElementNS("http://www.w3.org/2000/svg", "text");
    element.textContent = "11";
    element.setAttribute('y', 150);
    container2.insertAdjacentElement("beforeEnd", element);

    element = document.createElementNS("http://www.w3.org/2000/svg", "text");
    element.textContent = "12";
    element.setAttribute('y', 170);
    container2.insertAdjacentElement("afterEnd", element);
</script>
</html>
